<template>
    <div id="broadCast-detail">
        <div class="broadCast-detail-title">广播详情</div>
        <el-form ref="formData" :model="formData" label-width="130px">
            <el-form-item label="广播ID：">
                <span>{{formData.id}}</span>
            </el-form-item>
            <el-form-item label="广播类型：">
                <span>{{formData.type}}</span>
            </el-form-item>
            <el-form-item label="账号：">
                <span>{{formData.account}}</span>
            </el-form-item>
            <el-form-item label="昵称：">
                <span>{{formData.nickname}}</span>
            </el-form-item>
            <el-form-item label="性别：">
                <span>{{formData.sex}}</span>
            </el-form-item>
            <el-form-item label="城市：">
                <span>{{formData.city}}</span>
            </el-form-item>
            <el-form-item label="日期：">
                <span>{{formData.date}}</span>
            </el-form-item>
            <el-form-item label="时间段：">
                <span>{{formData.time}}</span>
            </el-form-item>
            <el-form-item label="报名人数：">
                <span>{{formData.signNum}}</span>
            </el-form-item>
            <el-form-item label="点赞人数：">
                <span>{{formData.likeNum}}</span>
            </el-form-item>
            <el-form-item label="约会描述：">
                <span>{{formData.description}}</span>
            </el-form-item>
        </el-form>
        <div class="ui-img">
            <p class="ui-img-title">配图</p>
            <div  class="ui-img-item" :key="index" v-for="(item,index) in imageUrl" @click="onPreviewClick(item, index)">
                <img class="ui-img-show" :src="item.url" />
                <div class="ui-img-ban" v-show="item.forbidden === 1">
                    <p class="ui-ban-title">已封</p>
                </div>
            </div>
            <el-dialog :visible.sync="dialogVisible">
                <img class="ui-img-preview" :src="image_preview" alt="">
                <el-button @click="onBanImage()" size="small">封锁</el-button>
                <el-button @click="onCancleBanImage()" size="small">解封</el-button>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    name: 'user-man-detail',
    data () {
        return {
            broadCastId: '',
            formData: {
                account: '0000001',
                likers: '12',
                area: '广东 广州',
                nickname: '大菠萝',
                evaluate: '有趣'
            },
            imageUrl: [],
            image_preview: '',
            image_preview_index: '',
            limit: 0,
            dialogVisible: false
        }
    },
    created () {
        this.formData = {
            account: '',
            likers: '',
            area: '',
            nickname: '',
            evaluate: ''
        }
    },
    mounted () {
        // 获取详情数据
        // alert(this.$route.params.id)
        this.getData(this.$route.params.id)
        this.broadCastId = this.$route.params.id
    },
    methods: {
        handleRemove (file, fileList) {
            console.log('1', file)
            console.log('2', fileList)
            // this.imageUrl
        },
        onPreviewClick (item, index) {
            this.image_preview = item.url
            this.image_preview_index = index
            this.dialogVisible = true
            // console.log(this.dialogImageUrl)
        },
        // 获取站点详情
        getData (id) {
            var _this = this
            this.$api.broadCast.getDetail(id, res => {
                // 隐藏加载动画
                // this.$vux.loading.hide()
                if (res.code === 200) {
                    _this.formData = {
                        id: res.data.id,
                        account: res.data.userId,
                        nickname: res.data.nickname,
                        sex: res.data.sex === 1 ? '女' : '男',
                        city: res.data.city,
                        type: res.data.type,
                        date: res.data.date,
                        time: res.data.time,
                        signNum: res.data.signNum,
                        likeNum: res.data.likeNum,
                        description: res.data.description
                    }
                    var list = res.data.images
                    _this.limit = list.length
                    for (var i = 0; i < list.length; i++) {
                        _this.imageUrl.push({
                            name: list[i].url.substring(list[i].length - 12),
                            url: list[i].url,
                            forbidden: list[i].forbidden
                        })
                    }
                }
            })
        },
        onBanImage () {
            this.$set(this.imageUrl[this.image_preview_index], 'forbidden', 1)
            this.forbidImages()
        },
        onCancleBanImage () {
            this.$set(this.imageUrl[this.image_preview_index], 'forbidden', 0)
            this.forbidImages()
        },
        // 封禁图片
        forbidImages () {
            let _this = this
            let imgList = ''
            for (var i = 0; i < this.imageUrl.length; i++) {
                if (this.imageUrl[i].forbidden === 1) {
                    if (imgList === '') {
                        imgList = this.imageUrl[i].url
                    } else {
                        imgList = imgList + ',' + this.imageUrl[i].url
                    }
                }
            }
            let params = {
                broadCastId: this.broadCastId,
                forbidImages: imgList
            }
            let data = {
                params: params
            }
            console.log('提交数据', data)
            this.$api.broadCast.forbidImages(data, res => {
                // 隐藏加载动画
                // this.$vux.loading.hide()
                if (res.code === 200) {
                    _this.$message('修改成功')
                } else {
                    _this.$message('修改失败')
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    #broadCast-detail {
        width: 740px;
        height: 100%;
        padding: 10px 0;
        .broadCast-detail-title{
            font-size: 22px;
            margin-bottom: 10px;
        }
        .el-form-item{
            display: inline-block;
            margin-bottom: 0;
            width: 360px;
        }
        .el-form-item__content{
            height: 30px;
        }
        .el-form-item__label{
            height: 30px;
        }
        .btn-height{
            width: 720px;
            padding: 10px 0 20px 0;
        }
        .ui-img{
            display: block;
            padding: 8px 48px;
        }
        .ui-img-title{
            display: block;
            line-height: 36px;
            font-size: 18px;
        }
        .ui-img-item{
            display: inline-block;
            position: relative;
            width: 120px;
            height: 120px;
            margin-top: 16px;
            margin-right: 16px;
        }
        .ui-img-show{
            display: block;
            width: 120px;
            height: 120px;
        }
        .ui-img-show:hover{
            width: 124px;
            height: 124px;
        }
        .ui-img-ban{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .ui-ban-title{
            width: 120px;
            line-height: 120px;
            font-size: 20px;
            color: #f00;
            font-weight: 600;
            text-align: center;
        }
        .ui-img-preview{
            display: block;
            width: 100%;
            height: 100%;
            margin-bottom: 20px;
        }
    }
</style>
